<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgba(21, 21, 255, 0.411);
      }
      .container {
        position: relative;
        width: 500px;
        height: 600px;
        background-color: red;
      }
      .pos {
        position: absolute;
        top: 50px;
        left: 50px;
      }
      .item {
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus
      voluptatum sapiente nobis vero possimus sint sit ex tempore officia
      numquam tenetur nihil sequi, cupiditate consectetur blanditiis! Optio
      provident eligendi eveniet amet consectetur praesentium quam voluptatem?
      Aspernatur tenetur ipsam est culpa sit id, nam odit doloremque eligendi
      mollitia, adipisci harum quidem dolor ratione, repellendus magni excepturi
      neque dicta molestias. Sunt voluptates nobis minus praesentium natus?
      Aspernatur nam molestiae maiores repudiandae odit laboriosam aut mollitia
      error quas doloribus! Explicabo ipsum debitis praesentium, voluptatibus ad
      nisi neque, quibusdam obcaecati quaerat nobis quidem eaque voluptatem
      omnis laborum ab, nostrum animi accusantium provident. Repudiandae, ullam.
    </p>
    <div class="container">
        <video src="https://video.people.cn/upload/vod/user1739759454736028/1760410800073295/origin.mp4" controls
        class="pos" style="width: 650px;"></video>
        
      <div class="item" style="background-color: #fff"></div>
      <div class="item pos" style="background-color: #fff"></div>
      <div class="item" style="float: left; background-color: blue"></div>
    </div>
  </body>
</html>
